<template>
  <div>
    <el-container>
      <el-header>
        <el-row><el-col :span="2"> 权限管理 </el-col></el-row>
      </el-header>
      <el-main>
        <el-button
          icon="el-icon-refresh-right"
          circle
          @click="cssx()"
        ></el-button>
        <el-button
          icon="el-icon-plus"
          @click="dialogVisibleinsert = true"
          circle
        ></el-button>
        <el-tabs v-model="url">
          <el-tab-pane label="父级" name="first">
            <el-table
              :data="tableData"
              @row-dblclick="hang"
              style="width: 100%"
              border
              stripe
            >
              <el-table-column prop="type" label="权限名称" align="center">
              </el-table-column>
              <el-table-column prop="img" label="图片路径" align="center">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="cz(scope.row)"
                    >编辑</el-button
                  >
                  <el-button size="mini" type="danger" @click="delt(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-row>
            <el-col :span="1">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 6, 9, 12]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="rows"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tabs>

        <el-tabs v-model="url1">
          <el-tab-pane label="子级" name="first1" disabled="disabled">
            <div class="ho">
              <el-button
                icon="el-icon-plus"
                @click="dialogVisibleinsert1 = true"
                circle
              ></el-button>
            </div>
            <el-table :data="tableData1" style="width: 100%" border stripe>
              <el-table-column prop="type" label="权限名称" align="center">
              </el-table-column>
              <el-table-column prop="qurl" label="地址路径" align="center">
              </el-table-column>
              <el-table-column prop="img" label="图片路径" align="center">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="cz1(scope.row)"
                    >编辑</el-button
                  >
                  <el-button size="mini" type="danger" @click="delt1(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-row>
              <el-col :span="1">
                <el-pagination
                  @size-change="handleSizeChange1"
                  @current-change="handleCurrentChange1"
                  :current-page="currentPage1"
                  :page-sizes="[3, 6, 9, 12]"
                  :page-size="pageSize1"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="rows1"
                >
                </el-pagination>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>

    <el-dialog
      title="父级权限添加"
      :visible.sync="dialogVisibleinsert"
      width="50%"
    >
      <el-form
        ref="forminsert"
        :model="forminsert"
        :rules="formruleinsert"
        label-width="80px"
      >
        <el-form-item label="权限名称" prop="type">
          <el-input v-model="forminsert.type"></el-input>
        </el-form-item>
        <el-form-item label="图片路径" prop="img">
          <el-input v-model="forminsert.img"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinsert = false">取 消</el-button>
        <el-button type="primary" @click="insert('forminsert')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="父级权限修改"
      :visible.sync="dialogVisibleUpdate"
      width="50%"
    >
      <el-form
        ref="formUpdate"
        :model="formUpdate"
        :rules="formruleUpdate"
        label-width="80px"
      >
        <el-form-item label="权限名称" prop="type">
          <el-input v-model="formUpdate.type"></el-input>
        </el-form-item>
        <el-form-item label="图片路径" prop="img">
          <el-input v-model="formUpdate.img"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
        <el-button type="primary" @click="Upda('formUpdate')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="子级权限添加"
      :visible.sync="dialogVisibleinsert1"
      width="50%"
    >
      <el-form
        ref="forminsert1"
        :model="forminsert1"
        :rules="formruleinsert1"
        label-width="80px"
      >
        <el-form-item label="权限名称" prop="type">
          <el-input v-model="forminsert1.type"></el-input>
        </el-form-item>
        <el-form-item label="地址路径" prop="qurl">
          <el-input v-model="forminsert1.qurl"></el-input>
        </el-form-item>
        <el-form-item label="图片路径" prop="img">
          <el-input v-model="forminsert1.img"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleinsert1 = false">取 消</el-button>
        <el-button type="primary" @click="insert1('forminsert1')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="父级权限修改"
      :visible.sync="dialogVisibleUpdate1"
      width="50%"
    >
      <el-form
        ref="formUpdate1"
        :model="formUpdate1"
        :rules="formruleUpdate1"
        label-width="80px"
      >
        <el-form-item label="权限名称" prop="type">
          <el-input v-model="formUpdate1.type"></el-input>
        </el-form-item>
        <el-form-item label="地址路径" prop="qurl">
          <el-input v-model="formUpdate1.qurl"></el-input>
        </el-form-item>
        <el-form-item label="图片路径" prop="img">
          <el-input v-model="formUpdate1.img"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleUpdate1 = false">取 消</el-button>
        <el-button type="primary" @click="Upda1('formUpdate1')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Gettypefy, Insq, Updfj, Detfj, Getpdc } from "../http/user.js";
import qs from "qs";
export default {
  data() {
    return {
      url: "first",
      url1: "",
      //每页显示数
      pageSize: 3,
      //当前页
      currentPage: 1,
      //总行数
      rows: 1,
      tableData: [],
      pageSize1: 3,
      currentPage1: 1,
      rows1: 1,
      tableData1: [],
      zj: "",
      dialogVisibleinsert: false,
      dialogVisibleUpdate: false,
      forminsert: {
        type: "",
        pid: 0,
        qurl: "",
        state: "",
        img: "",
      },
      formruleinsert: {
        type: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
        img: [{ required: true, message: "请输入图片路径", trigger: "blur" }],
      },
      formUpdate: {
        type: "",
        pid: 0,
        img: "",
        id: "",
      },
      formruleUpdate: {
        type: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
        img: [{ required: true, message: "请输入图片路径", trigger: "blur" }],
      },
      dialogVisibleinsert1: false,
      forminsert1: {
        type: "",
        pid: "",
        qurl: "",
        state: "",
        img: "",
      },
      formruleinsert1: {
        type: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
        qurl: [{ required: true, message: "请输入地址路径", trigger: "blur" }],
        img: [{ required: true, message: "请输入图片路径", trigger: "blur" }],
      },
      dialogVisibleUpdate1: false,
      formUpdate1: {
        qurl: "",
        type: "",
        pid: "",
        img: "",
        id: "",
      },
      formruleUpdate1: {
        type: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
        img: [{ required: true, message: "请输入图片路径", trigger: "blur" }],
        qurl: [{ required: true, message: "请输入地址路径", trigger: "blur" }],
      },
    };
  },
  methods: {
    cssx() {
      this.sx();
      this.url1 = "";
    },
    delt1(row) {
      if (confirm("确定删除吗")) {
        Detfj({
          params: {
            id: row.id,
          },
        })
          .then((res) => {
            if (res.Data == 1) {
              this.$message({
                message: "恭喜你，删除成功",
                type: "success",
              });
              Getpdc({
                params: {
                  i: this.currentPage1,
                  j: this.pageSize1,
                  id: this.zj,
                },
              })
                .then((res) => {
                  console.log(res);
                  if (res.Data == "") {
                    console.log(2);
                    this.currentPage1 = this.currentPage1 - 1;
                    this.sx1();
                  } else {
                    this.sx1();
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          })
          .catch((err) => {
            console.info(err);
          });
      }
    },
    Upda1(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          Updfj(qs.stringify(this.formUpdate1))
            .then((res) => {
              console.log(res);
              if (res.Data == 1) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.sx1();
                this.dialogVisibleUpdate1 = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    cz1(row) {
      this.dialogVisibleUpdate1 = true;
      this.formUpdate1.id = row.id;
      this.formUpdate1.type = row.type;
      this.formUpdate1.qurl = row.qurl;
      this.formUpdate1.img = row.img;
    },
    insert1(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          Insq(qs.stringify(this.forminsert1))
            .then((res) => {
              console.log(res);
              if (res.Data == 1) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.sx1();
                this.dialogVisibleinsert1 = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    sx1() {
      Getpdc({
        params: {
          i: this.currentPage1,
          j: this.pageSize1,
          id: this.zj,
        },
      })
        .then((res) => {
          console.log(res);
          console.log(res.Data);
          this.tableData1 = res.Data;
          this.rows1 = res.Row;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange1: function (val) {
      this.pageSize1 = val;
      this.sx1();
    },
    handleCurrentChange1: function (val) {
      this.currentPage1 = val;
      this.sx1();
    },
    hang(row) {
      this.forminsert1.pid = row.id;
      this.formUpdate1.pid = row.id;
      this.url1 = "first1";
      this.zj = row.id;
      this.sx1();
    },
    delt(row) {
      if (confirm("确定删除吗")) {
        Detfj({
          params: {
            id: row.id,
          },
        })
          .then((res) => {
            if (res.Data == 1) {
              this.$message({
                message: "恭喜你，删除成功",
                type: "success",
              });
              Gettypefy({
                params: {
                  i: this.currentPage,
                  j: this.pageSize,
                },
              })
                .then((res) => {
                  console.log(1);
                  console.log(res);
                  if (res.Data == "") {
                    console.log(2);
                    this.currentPage = this.currentPage - 1;
                    this.sx();
                  } else {
                    this.sx();
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          })
          .catch((err) => {
            console.info(err);
          });
      }
    },
    Upda(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          Updfj(qs.stringify(this.formUpdate))
            .then((res) => {
              console.log(res);
              if (res.Data == 1) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.sx();
                this.dialogVisibleUpdate = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    cz(row) {
      this.dialogVisibleUpdate = true;
      this.formUpdate.id = row.id;
      this.formUpdate.type = row.type;
      this.formUpdate.img = row.img;
    },
    insert(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          Insq(qs.stringify(this.forminsert))
            .then((res) => {
              console.log(res);
              if (res.Data == 1) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.sx();
                this.dialogVisibleinsert = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({
            message: "请填写完整信息",
            type: "error",
          });
          return false;
        }
      });
    },
    sx() {
      Gettypefy({
        params: {
          i: this.currentPage,
          j: this.pageSize,
        },
      })
        .then((res) => {
          console.log(res);
          this.tableData = res.Data;
          this.rows = res.Row;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.sx();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.sx();
    },
  },
  mounted() {
    this.sx();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  border-radius: 15px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border: solid 5px white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}
.el-col-2 {
  width: 8.33333%;
  font-size: 17px;
  font-weight: 900;
}
.el-col-6 {
  width: 37.5%;
  font-size: 1px;
  font-weight: 300;
  color: rgb(83, 83, 83);
}
element.style {
  height: 100%;
  width: 1239px;
}
.el-button.is-circle {
  border-radius: 50%;
  padding: 12px;
  position: relative;
  top: 10px;
  right: -570px;
  margin: -10px 10px -15px 0px;
  z-index: 100;
}
.ho {
  margin-bottom: 30px;
}
</style>